<template>
    <div class="role-list">
        <ToolBar>
            <el-button type="primary" icon="el-icon-plus" size="small" @click="editRole(false)">添加</el-button>
            <div style="float: right">
                <el-input
                    placeholder="请输入角色名称！"
                    size="small"
                    style="width: 140px"
                    v-model="params.name"
                    @clear="searchRole"
                    clearable>
                </el-input>
                <el-button @click="searchRole" type="success" icon="el-icon-search" size="small"></el-button>
            </div>
        </ToolBar>
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="roleData"
            border
            ref="table"
            height="760"
            :default-sort = "{prop: 'date', order: 'descending'}"
            style="width: 100%">
            <el-table-column
            prop="id"
            label="角色Id"
            sortable
            width="90">
        </el-table-column>
            <el-table-column
                prop="name"
                label="角色名称">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
            <el-table-column
                prop="created_at"
                sortable
                label="创建时间">
            </el-table-column>
            <el-table-column
                prop="updated_at"
                sortable
                label="修改时间">
            </el-table-column>
            <el-table-column
                label="操作"
                :render-header="tableAction"
                width="150">
                <template slot-scope="scope">
                    <el-button @click="editRole(scope.row)" type="primary" icon="el-icon-edit" size="small"
                               circle></el-button>
                    <el-button @click="currentEditPermissions = scope.row" type="success" icon="el-icon-setting"
                               size="small"
                               circle></el-button>
                    <el-button @click="deleteRole(scope.row.id)" type="danger" icon="el-icon-delete"
                               size="small"
                               circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <RoleEdit
            :title="roleEditTitle"
            :dialogFormVisible="dialogFormVisible"
            :data="currentEditRole"
            @val-change="roleEditChange"
            @cancel="dialogFormVisible = false"
        >
        </RoleEdit>
        <PermissionsEdit
            :role="currentEditPermissions"
            @success="refresh = !refresh"
            @cancel="currentEditPermissions = false;"
        ></PermissionsEdit>
        <Paginate
            api="getRole"
            :params="params"
            :refresh="refresh"
            @val-change="PaginateData"
        >
            </Paginate>
    </div>
</template>

<script>
    import ToolBar from '../../../components/ToolBar.vue';
    import HelpHint from '../../../components/HelpHint.vue';
    import Paginate from '../../../components/Paginate.vue';
    import RoleEdit from './RoleEdit.vue'
    import PermissionsEdit from './PermissionsEdit.vue'

    export default {
        data() {
            return {
                roleEditTitle: '角色编辑',
                currentEditRole: false,
                dialogFormVisible: false,
                currentEditPermissions: false,
                params: {
                    search: []
                },
                refresh: false,
                roleData: [],
                loading: true
            }
        },
        mounted() {
            // 调用请求数据的方法
            // this.getData()
        },
        methods: {
            PaginateData(list) {
                this.roleData = list;
                this.loading = false
            },
            searchRole() {
                let tableRow = this.$refs.table.$el.querySelectorAll('tbody tr');
                let tableRowHeight = tableRow[1].offsetHeight;
                let isjump = false;
                for (let i = 0; i < this.roleData.length; i++) {
                    if (this.params.name && this.roleData[i].name.indexOf(this.params.name) != -1) {
                        tableRow[i].style.backgroundColor = '#85ce61';
                        if (!isjump) {
                            scrollTo(0, i * tableRowHeight + 66);
                            isjump = true;
                        }
                    } else {
                        tableRow[i].style.backgroundColor = '#fff';
                    }
                }
            },
            tableAction() {
                return this.$createElement('HelpHint', {
                    props: {
                        content: '编辑角色 / 编辑角色权限 / 删除角色'
                    }
                }, '操作');
            },
            roleEditChange(data) {
                let self = this;
                if (this.currentEditRole === false) {
                    self.$Api.addRole({name: data.name, description: data.description}, (c) => {
                        if (c.code == 200) {
                            this.dialogFormVisible = false;
                            this.refresh= !this.refresh;
                            self.$notify({
                                title: self.roleEditTitle + '成功！',
                                message: '添加成功',
                                type: 'success'
                            });
                        }else {
                            self.$notify({
                                title: self.roleEditTitle + '失败！',
                                message: '添加失败',
                                type: 'error'
                            });
                        }
                    });
                } else {
                    self.$Api.updateRole({id: data.id, name: data.name, description: data.description}, (c) => {
                        if (c.code == 200) {
                            this.dialogFormVisible = false;
                            this.refresh = !this.refresh;
                            self.$notify({
                                title: self.roleEditTitle + '成功！',
                                message: '修改成功',
                                type: 'success'
                            });
                        }else {
                            self.$notify({
                                title: self.roleEditTitle + '失败！',
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    });
                }

            },
            editRole(data) {
                if (data) {
                    this.currentEditRole = data;
                } else {
                    this.currentEditRole = false;
                }

                this.dialogFormVisible = true;

            },
            deleteRole(id) {
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$Api.deleteRole({id:id}, (c) => {
                        if (c.code == 200) {
                            this.refresh = !this.refresh
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message({
                                type: 'danger',
                                message: '删除失败!'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'error',
                        message: '已取消删除'
                    });
                });
            },
            resetting(id) {

                let dom = this.$refs[id].$el;
                dom.style.transform = 'rotate(180deg)';
                setTimeout(() => {
                    dom.style.transform = 'rotate(0deg)'
                }, 600)
                this.$message({
                    message: '已经成功重置密码',
                    type: 'success'
                });

            },
        },
        components: {
            ToolBar, HelpHint, RoleEdit, PermissionsEdit, Paginate
        }
    }
</script>
<style lang="less">

</style>
